<script setup lang='tsx' name='Notice'>
import { useNoticeStore } from '@/stores/notice'
import { storeToRefs } from 'pinia';

const noticeStore = useNoticeStore()
const { processedList, unprocessedList } = storeToRefs(noticeStore)
noticeStore.getNoticeList()
const activeName = ref('unprocessed')
onActivated(() => noticeStore.getNoticeList())
</script>

<template>
    <div class='notification-container'>
        <el-tabs v-model="activeName" class="demo-tabs">
            <el-tab-pane label="未处理" name="unprocessed">
                <el-table :data="unprocessedList" stripe style="width: 100%" :max-height="800"
                    :header-cell-style="{ background: `#f5f7fa` }">
                    <el-table-column prop="user.headPic" label="头像" />
                    <el-table-column prop="user.nickName" label="昵称" />
                    <el-table-column prop="reason" label="理由">
                        <template v-slot="{ row }">
                            <div style="overflow-y: auto;border-radius: 8px;border: 1px solid #cacaca;background-color: #fefefe;"
                                class="max-h-60px overflow-y-auto p-l-10px">
                                <span style="white-space: pre-line;">{{ row.reason
                                    }}</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="请求时间" />
                    <el-table-column label="操作">
                        <template v-slot="{ row }">
                            <template v-if="row.isFromMe">
                                <el-button text size="small" type="info">等待验证</el-button>
                            </template>
                            <template v-else>
                                <el-button text size="small" type="success"
                                    @click="noticeStore.agree(row.id, row.user.id)">同意</el-button>
                                <el-button text size="small" type="danger"
                                    @click="noticeStore.reject(row.id, row.user.id)">拒绝</el-button>
                            </template>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="已处理" name="processed">
                <el-table :data="processedList" stripe style="width: 100%" :max-height="800"
                    :header-cell-style="{ background: `#f5f7fa` }">
                    <el-table-column prop="user.headPic" label="头像" />
                    <el-table-column prop="user.nickName" label="昵称" />
                    <el-table-column prop="reason" label="理由">
                        <template v-slot="{ row }">
                            <div style="overflow-y: auto;border-radius: 8px;border: 1px solid #cacaca;background-color: #fefefe;"
                                class="max-h-60px overflow-y-auto p-l-10px">
                                <span style="white-space: pre-line;">{{ row.reason
                                    }}</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="请求时间" />
                    <el-table-column label="状态">
                        <template v-slot="{ row }">
                            <div class="flex flex-items-center gap-4px" v-if="row.status === 1">
                                <el-icon v-if="row.isFromMe">
                                    <TopRight />
                                </el-icon>
                                <el-icon v-else>
                                    <BottomLeft />
                                </el-icon>
                                <el-tag type="success">已同意</el-tag>

                            </div>
                            <div class="flex flex-items-center gap-4px" v-else>
                                <el-icon v-if="row.isFromMe">
                                    <TopRight />
                                </el-icon>
                                <el-icon v-else>
                                    <BottomLeft />
                                </el-icon>
                                <el-tag type="danger">已拒绝</el-tag>

                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<style lang='scss' scoped></style>